import { defineStore } from 'pinia';
import { PRIMARY_COLOR } from '../../config';
import { ref, reactive } from 'vue';

interface ThemeConfig {
  showSetting: boolean;
  mode: string;
  showTag: boolean;
  footer: boolean;
  isDark: boolean;
  showLogo: boolean;
  primary: string;
  globalComSize: string;
  uniqueOpened: boolean;
  fixedHeader: boolean;
  gray: boolean;
  weak: boolean;
}

/**
 * 系统设置Store
 * @description 用于管理系统界面设置和主题配置
 * @author 系统
 * @version 1.0.0
 * @since 2024-01-01
 */
export const useSettingStore = defineStore(
  'settingState',
  () => {
    /**
     * 侧边栏是否折叠
     * @type {import('vue').Ref<boolean>}
     * @description 控制左侧导航菜单的折叠状态
     */
    const isCollapse = ref(true);

    /**
     * 是否无动画
     * @type {import('vue').Ref<boolean>}
     * @description 控制侧边栏折叠/展开时是否显示动画
     */
    const withoutAnimation = ref(false);

    /**
     * 设备类型
     * @type {import('vue').Ref<string>}
     * @description 当前设备类型：desktop（桌面端）、mobile（移动端）
     */
    const device = ref('desktop');

    /**
     * 是否重新加载
     * @type {import('vue').Ref<boolean>}
     * @description 控制页面是否需要重新加载
     */
    const isReload = ref(true);

    /**
     * 是否显示设置面板
     * @type {import('vue').Ref<boolean>}
     * @description 控制设置面板的显示/隐藏
     */
    const isShow = ref(false);
    const themeConfig = reactive({
      // 显示设置
      showSetting: false,
      // 菜单展示模式 默认 vertical   horizontal / vertical /columns
      mode: 'horizontal',
      // tagsView 是否展示 默认展示
      showTag: false,
      // 页脚
      footer: true,
      // 深色模式 切换暗黑模式
      isDark: false,
      // 显示侧边栏Logo
      showLogo: true,
      // 极速主题颜色
      primary: PRIMARY_COLOR,
      // element组件大小
      globalComSize: 'default',
      // 是否只保持一个子菜单的展开
      uniqueOpened: true,
      // 固定header
      fixedHeader: true,
      // 灰色模式
      gray: false,
      // 色弱模式
      weak: false
    } as ThemeConfig);
    /**
     * 应用排序
     * @type {import('vue').Ref<number[]>}
     * @description 存储应用模块的显示顺序
     */
    const appsSort = ref<number[]>([]);

    /**
     * 设置主题配置
     * @param {Object} params - 配置参数
     * @param {keyof ThemeConfig} params.key - 配置项键名
     * @param {any} params.val - 配置项值
     * @description 更新主题配置的指定项
     */
    const setThemeConfig = ({ key, val }: { key: keyof ThemeConfig; val: any }) => {
      themeConfig[key] = val;
    };

    /**
     * 切换侧边栏折叠状态
     * @param {boolean} value - 是否折叠
     * @description 设置侧边栏的折叠状态
     */
    const setCollapse = (value: boolean) => {
      isCollapse.value = value;
      withoutAnimation.value = false;
    };

    /**
     * 关闭侧边栏
     * @param {Object} params - 关闭参数
     * @param {boolean} params.withoutAnimation - 是否无动画
     * @description 关闭侧边栏并控制动画效果
     */
    const closeSideBar = ({ withoutAnimation: withoutAnim }: { withoutAnimation: boolean }) => {
      isCollapse.value = false;
      withoutAnimation.value = withoutAnim;
    };

    /**
     * 切换设备类型
     * @param {string} dev - 设备类型
     * @description 设置当前设备类型
     */
    const toggleDevice = (dev: string) => {
      device.value = dev;
    };

    /**
     * 设置重新加载
     * @description 触发页面重新加载效果
     */
    const setReload = () => {
      isReload.value = false;
      setTimeout(() => {
        isReload.value = true;
      }, 50);
    };

    /**
     * 保存应用排序
     * @param {number[]} sort - 应用排序数组
     * @description 更新应用模块的显示顺序
     */
    const setAppsSort = (sort: number[]) => {
      appsSort.value = sort;
    };

    // 返回所有状态和方法
    return {
      // 状态
      isCollapse,
      withoutAnimation,
      device,
      isReload,
      isShow,
      themeConfig,
      appsSort,

      // 方法
      setThemeConfig,
      setCollapse,
      closeSideBar,
      toggleDevice,
      setReload,
      setAppsSort
    };
  },
  {
    // 启用持久化存储
    persist: {
      key: 'settingState',
      storage: window.localStorage,
      paths: ['appsSort', 'themeConfig'] // 添加 themeConfig 到持久化列表
    }
  }
);
